跳到主要内容

前端存储数据的方式

操作表单​

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • ....

获取输入框的值​

  • 文本框 text
  • 密码框 password
<form action="#" method="post">
    <!--一般在输入框前面的文字用span括起来-->
    <span>用户名: </span> <input type="text" id="username">
</form>


<script>
    let username = document.getElementById('username');
    ...
    //等输入完成之后再取得输入框的值
    let value = username.value
</script>

获取选框的值​

  • 单选框 radio
  • 多选框 checkbox

<script>
    let radio01 = document.getElementById('radio01');
    ...
    //判断是否选中(返回结果是boolen)
    radio01.checked;
</script>

前端密码 MD5 加密​

MD5 加密需要导入一个包

<!-- 首先导入这个包 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.16.0/js/md5.min.js"></script>

<!--
    表单也可以绑定一个提交事件
    onsubmit绑定一个提交检查的函数(返回值是Boolean)
    将这个结果返回给表单，如果是false则不跳转
-->
<form action="#" method="post" onsubmit="return aaa()">
    <!--一般在输入框前面的文字用span括起来-->
    <!--注意如果不加name属性则无法在header找到-->
    <p><span>用户名: </span> <input type="text" id="username" name="username"></p>
    <p><span>密码: </span> <input type="password" id="input-password"></p>
    <!--为了防止密码变长(加密后密码会变长)的回显，所以要隐藏输入内容-->
    <input type="hidden" id="md5-password" name="password">

    <!--按钮也可以绑定onClick事件-->
    <button type="submit">提交</button>
</form>


<script>
    function aaa() {
        let name = document.getElementById('username');
        let pwd = document.getElementById('input-password');
        let md5pwd = document.getElementById('md5-password');

        //MD5加密
        md5pwd.value = md5(pwd.value);

        //输出的实际是隐藏框的密码
        console.log(name.value);
        console.log(md5pwd.value);

        return false;
    }

</script>

浏览器存储数据​

参考资料 MDN--Document.cookie

1、读取所有可从此位置访问的Cookie

allCookies = document.cookie;

2、写一个新 cookie

document.cookie = "name=alsritter"

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 Cookie。

举例来说，A网页是 http://w1.example.com/a.html ，B网页是 http://w2.example.com/b.html ，那么只要设置相同的 document.domain ，两个网页就可以共享 Cookie。

// A 网页
document.domain = 'example.com';
document.cookie = "test1=hello";

// B 网页就能直接读取到这个 Cookie 了
var allCookie = document.cookie;

localStorage​

不会过期，除非手动删除

// 增加一个数据项目
localStorage.setItem('myCat', 'Tom');

// 读取 localStorage 项
let cat = localStorage.getItem('myCat');

// 移除 localStorage 项
localStorage.removeItem('myCat');

// 移除所有的 localStorage 项
localStorage.clear();

sessionStorage​

存储在 sessionStorage 里面的数据在页面会话结束时会被清除。 也就是说：新开一个页面就是一个新的 sessionStorage

如果关闭浏览器或该页面，sessionStorage 的数据就会消失

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

三者的区别​

a63KZd.png